<template>
  <div class="login">
    <van-nav-bar title="用户登录" left-arrow @click-left="$router.push('/my')" />
    <div class="container">
      <div class="title">
        <h3>用户名登录</h3>
        <p>未注册的用户登录需先注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入用户名" type="text" v-model="userName">
        </div>
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入密码" type="password" v-model="userPassword">
        </div>
      </div>

      <div class="login-btn" @click="login">登录</div>

      <div class="register" @click="$router.push('/register')">还未注册?立即注册 >></div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { userLogin } from '@/api/userAccount/index'

export default {
  name: 'LoginPage',
  data() {
    return {
      userName: '',
      userPassword: '',
      rules: {
        userName: {
          rule: /^[a-zA-Z0-9]{3,20}$/,
          message: '用户名必须是3-20位字母或数字'
        },
        userPassword: {
          rule: /^.{6,}$/,
          message: '密码必须是6位以上'
        }
      }
    }
  },
  methods: {
    async login() {
      if (this.userName === '' || this.userPassword === '') {
        Toast({
          message: '用户名或密码不能为空',
          position: 'bottom',
        });
        return
      }
      // 1、验证
      if (!this.validate('userName')) return
      if (!this.validate('userPassword')) return

      // 2、发送请求
      const res = await userLogin(this.userName, this.userPassword)
      console.log(res);

      // 3、处理结果
      if (res.status === 200) {
        Toast.success(res.message);

        const token = res.token;

        localStorage.setItem('token', token);
        localStorage.setItem('userName', this.userName);
        this.$router.push('/my');

      } else if (res.status === 201) {
        Toast.fail(res);
      } else {
        Toast.fail('密码错误');
      }
    },

    // 验证表单
    validate(key) {
      let bool = true
      if (!this.rules[key].rule.test(this[key])) {
        bool = false

        // Totast 提示错误信息
        Toast({
          message: this.rules[key].message,
          position: 'bottom',
        });

        return bool
      }
      return bool
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;

    h3 {
      margin-top: 18px;
      font-size: 38px;
      font-weight: normal;
    }

    p {
      line-height: 40px;
      font-size: 18px;
      color: #b8b8b8;
    }
  }

  .form-item {
    margin-top: 40px;
    border-bottom: 1px solid #f3f1f2;
    padding: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;

    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 18px;
      flex: 1;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 49px;
    background: linear-gradient(90deg, #9ae6c8, #58c79d);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .register {
    text-align: center;
    margin-top: 38px;
    font-size: 16px;
    color: #3794ff;
  }
}
</style>